<template>
	<view class="tow-column-container">
		<MySearch v-if="showSearch" class="fixed-search" />
		<!-- 列表 -->
		<scroll-view scroll-y @scrolltolower="onLower" style="height: calc(100vh - 100rpx);"
			:scroll-with-animation="true">
			<view class="list">
				<view v-for="(item,index) in data" :key="index" class="item">
					<image :src="item.img" mode="aspectFill" class="img"></image>
					<view class="name">{{item.name}}</view>
				</view>
			</view>
		</scroll-view>
		<tui-tips position="center" ref="toast"></tui-tips>
	</view>
</template>

<script>
	import MySearch from '@/components/MySearch/MySearch.vue'
	export default {
		data() {
			return {
				tabShow: false,
				tabScroll: 0,
				data: [],
				tabIndex: 0,
				page: 1,
				count: 0,
				showSearch: true,
				userInfo: {}
			}
		},
		onShow() {

		},
		onLoad(options) {
			this.userInfo = JSON.parse(localStorage.getItem('userInfo'))

			if (options.type) {
				if (options.type == 'history') {
					uni.setNavigationBarTitle({
						title: '观影记录'
					});
					this.getHistoryList(this.userInfo._id)
				} else {
					uni.setNavigationBarTitle({
						title: '收藏记录'
					});
				}
				this.showSearch = false;

			} else {
				uni.setNavigationBarTitle({
					title: '更多影片'
				});
				this.showSearch = true;
				this.getList();
			}
		},
		methods: {
			// 获取历史记录
			getHistoryList(id) {

				this.http.post("/RecordList", {
					page: this.page,
					userId: id
				}).then(res => {
					this.data.push(...res.data.data);
					this.count = res.count;
					uni.stopPullDownRefresh();
				});
			},
			// 获取更多
			getList() {
				this.http.post("/GetVideoList", {
					page: this.page
				}).then(res => {
					this.data.push(...res.data.data);
					this.count = res.count;
					uni.stopPullDownRefresh();
				});
			},
			// 分类数据到底
			onLower() {
				if (this.data.length < this.count) {
					this.page += 1;
					this.getList();
				} else {
					this.showTips()
				}
			},
			showTips(e) {
				let options = {
					msg: '我是有底线的啦~',
					duration: 2000
				};
				//需等组件初始化完成，确认已获取到组件实例
				this.$refs.toast && this.$refs.toast.showTips(options);
			},
			// 获取类型数据
			doGetTabs() {
				this.http.post("GetConfigTypes").then(res => {
					this.tabs = [{
						name: "热门推荐"
					}, ...res.data, {
						_id: "-1",
						name: "其他"
					}];
					this.doGetRecommendVideos();
				});
			},
			// 前往搜索页面
			onToSearch() {
				uni.navigateTo({
					url: "/pages/watchMovie/search"
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tow-column-container {
		// padding-top: 100rpx;
		/* 确保内容不会被固定的搜索栏遮挡 */
	}

	.fixed-search {
		position: fixed;
		top: 80rpx;
		left: 0;
		right: 0;
		z-index: 10;
		/* 确保搜索栏在最上层 */
		background-color: #fff;
		/* 根据需要设置背景颜色 */
		padding: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
		/* 可选：添加阴影效果 */
	}

	.list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
		padding: 20rpx;
	}

	.item {
		width: 100%;

		.img {
			width: 100%;
			height: 200rpx;
			border-radius: 15rpx;
		}

		.name {
			text-align: center;
			font-size: var(--title-size);
		}
	}
</style>